<template>
    <el-dialog title="物流跟踪" :visible.sync="visible" :before-close="handleClose" width="50%">
        <div v-loading="loading" class="dialog_centent_wrap" ref="dialog_wrap">
            <div v-if="deliveryResult && deliveryResult.msg === 'ok' && parseInt(deliveryResult.status) <= 6">
                <el-row>
                    <el-col :span="8">快递公司：{{deliveryResult.result.expName}}</el-col>
                    <el-col :span="8">快递公司电话：{{deliveryResult.result.expPhone}}</el-col>
                    <el-col :span="8">运单编号：{{deliveryResult.result.number}}</el-col>
                </el-row>
                <el-row style="margin-top: 10px;">
                    <el-col :span="8">快递员：{{deliveryResult.result.courier}}</el-col>
                    <el-col :span="8">快递员电话：{{deliveryResult.result.courierPhone}}</el-col>
                </el-row>
                <el-divider></el-divider>

                <el-steps v-if="deliveryResult.result.list" direction="vertical" :active="deliveryResult.result.list.length" finish-status="success" space="60px">
                    <el-step
                        v-for="item in deliveryResult.result.list"
                        :key="item.status"
                        :title="item.status"
                        :description="item.time"
                    ></el-step>
                </el-steps>
            </div>
            <div v-if="success">
                <el-alert
                    title="单号错误"
                    type="error"
                    :closable="false">
                </el-alert>
            </div>
        </div>

    </el-dialog>
</template>
<script>

export default {
    name: "logisticsDialog",
    props: {
        value: Boolean
    },
    computed: {
        visible: {
            get() {
                return this.value;
            },
            set(visible) {
                this.value = visible;
            }
        }
    },
    data() {
        return {
            // 物流信息
            deliveryResult: null,
            loading: true,
            success: false
        };
    },
    methods: {
        handleClose() {
            // 关闭窗口
            this.$emit("input", false);
            this.$refs.dialog_wrap.scrollTo(0,0);
        },

        /**
         * 调用物流接口查询
         */
        async getDeliveryResult(deliverySn) {
            if(deliverySn) {
                const res = await this.$http({
                    url: "http://kdwlcxf.market.alicloudapi.com/kdwlcx?no="+deliverySn,
                    method: "get",
                    withCredentials: false,
                    headers: {
                        Authorization: "APPCODE 25cab31896b84bcbbe9af5dcc09c64de"
                    }
                })
                if(res.msg == 'ok') {
                    this.deliveryResult = res
                    this.deliveryResult.result.list = res.result.list
                    this.loading = false
                    this.success = false
                } else {
                    this.deliveryResult = null
                    this.loading = false
                    this.success = true
                }
            } else {
                this.deliveryResult = null
                this.loading = false
                this.success = true
            }
        },

    }
};
</script>
<style lang="scss" scoped>
.dialog_centent_wrap{
    height: 400px;
    overflow-y: auto;
    padding: 0 10px;
}
</style>
